<template>
  <div class="form-table">
    <s-table ref="table" size="default" v-bind="configTable">
      <!-- 自定义列渲染 -->
      <template v-for="slot in slots" :slot="slot.customRender" slot-scope="text, record, index">
        <FormTableColumnRender
          :key="slot.customRender"
          v-bind="{text, record, index, ...slot, pagination: $refs.table.getPagination()}"
        >
        </FormTableColumnRender>
      </template>
    </s-table>
  </div>
</template>

<script>
import { buildPaginationObj } from '@/components/Table'
import FormTableColumnRender from '@comp/ConfigForm/components/form-table-column-render.vue'
export default {
  name: 'FormTable',
  components: { FormTableColumnRender },
  props: {
    tableConfig: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    const DEFAULT_CONFIG = {
      columns: [],
      data: async () => (buildPaginationObj([])),
      rowKey: (record, index) => (record.id || index)
    }
    return {
      DEFAULT_CONFIG
    }
  },
  computed: {
    configTable () {
      return Object.assign({}, this.DEFAULT_CONFIG, this.tableConfig)
    },
    slots () {
      return this.configTable.columns.filter(e => e.scopedSlots).map(item => item.scopedSlots)
    }
  },
  methods: {
    getTable () {
      return this.$refs.table
    }
  }
}
</script>

<style scoped lang='less'>
.form-table {
  padding: 16px 0;
}

</style>
